<template>
    <div class="da">
        <header>
            <van-icon @click="fan" size="25" class="zuo" name="arrow-left" />
            <div class="wo">我的关注</div>
        </header>
        <main>
            <!-- <van-empty image="http://localhost:7000/static/media/no_message.7117812e79db582fc666.png"
                            image-size="130" description="您还没有关注哦!" /> -->
            <!--  -->
          
            <div class="t1" v-for="(item, index) in items" :key="index">
                <van-swipe-cell>
  <img class="img1" :src="item.im" alt="">
                <div class="you1">
                    <h3 class="ze">{{ item.name }}</h3>
                    <span class="er">儿科/副主任医师</span>
                    <div class="sj">广东省妇幼保健医院/儿科</div>
                    <span class="ze">好评率 98%</span>
                    <span class="er1">服务患者数 666</span>
                </div>
  <template #right>
    <van-button @click="deleteItem(index)" square text="取消关注" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
                
            </div>

        </main>
    </div>
</template>
<script>
import router from '../../router/index';

import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: 'DeleteExample',
    setup() {
        // 使用ref来定义响应式的数据  
        const items = ref([
            {
                id: 1,
                name: '张三',
                zhize: '副主任医师',
                di: '广东省妇幼保健医院/儿科',
                hp: '98%',
                fw: '690',
                im: 'https://img2.baidu.com/it/u=3962516159,1228745171&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1724778000&t=fa6c0e98a4e372315960673c5b06b982'
            },
            {
                id: 2,
                name: '范冰冰',
                zhize: '副主任医师',
                di: '广东省妇幼保健医院/儿科',
                hp: '96%',
                fw: '616',
                im: 'https://img0.baidu.com/it/u=3766540101,1187450511&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1724778000&t=4a3b62efbd11242b9f4b581b5cf7582d'
            },
            {
                id: 3,
                name: '摇太阳',
                zhize: '副主任医师',
                di: '广东省妇幼保健医院/儿科',
                hp: '93%',
                fw: '636',
                im: 'https://img0.baidu.com/it/u=2860718908,2381642707&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1724778000&t=7fb82a01bd79f516410d3080213e3141'
            },
            {
                id: 4,
                name: '小小妹',
                zhize: '副主任医师',
                di: '广东省妇幼保健医院/儿科',
                hp: '93%',
                fw: '636',
                im: 'https://img2.baidu.com/it/u=1347512240,4237785534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1724778000&t=155dfdd315a58f26b2780ca1b28ca74a'
            },
            {
                id: 5,
                name: '周杰伦',
                zhize: '副主任医师',
                di: '广东省妇幼保健医院/儿科',
                hp: '93%',
                fw: '636',
                im: 'https://img0.baidu.com/it/u=2157021847,659943663&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1724778000&t=429dbc3ffb0e5f5af79eff348ed41315'
            }
        ]);

        // 定义一个方法来删除指定索引的数据项  
        function deleteItem(index) {
            // Vue 3的ref返回的是响应式对象，需要通过.value来访问其值  
            items.value.splice(index, 1); // 使用splice方法从数组中移除元素  
            showToast('取消关注成功');
        }
        const fan = () => {
            console.log('返回');
            router.push('/my');
        }
        // 返回需要在模板中使用的响应式数据和函数  
        return {
            items,
            deleteItem,
            fan
        };
    }
});

</script>
<style scoped>
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    width: 66px;
font-size: 18px;
    height: 149px;
  }
.er1 {
    float: left;
    margin-top: 10px;
    margin-left: 20px;
}

.jl {
    width: 90px;
    height: 40px;
    font-size: 12px;
    color: #fff;
    background: #3087ea;
    border: none;
}

.qv {
    width: 100px;
    height: 40px;
    font-size: 12px;
    color: #fff;
    background: #3087ea;
    border: none;
    margin: 3px 0 0 15px;
}

.ze {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

.er {
    margin-top: 15px;
    margin-left: 20px;
    float: left;
}

.sj {
    margin: 10px;
    float: left;
}


.dong {
    margin-top: 10px;
    float: left;
}

.ht3 {
    float: left;
    margin-left: 10px;
}

.fuz {
    margin-left: 20px;
    float: left;
}


.img1 {
    width: 107px;
    height: 100%;
    float: left;
}

.t1 {
    width: 100%;
    height: 150px;
    margin-top: 10px;
    background: #fff;
}

.da {
    width: 100vw;
    height: 100vh;
    background: #f4f0f0;
    
}

header {
    width: 100%;
    height: 50px;
    background: #fff;
}

.zuo {
    line-height: 50px;
    float: left;
    margin-left: 10px;
}

.wo {
    float: left;
    line-height: 50px;
    margin-left: 30%;
    font-size: 20px;
    font-weight: 600;
}
</style>